<template>
  <div>
    <AfterSalesForm @search="search" :is-loading="btnLoading"></AfterSalesForm>
    <div class="showtable">
      <el-table border style="width: 100%;" :data="tableData" v-loading="loadingData">
        <el-table-column v-for="(item, index) in theader" align="center" :width="item.width || ''" :key="index"
          :label="item.label" :prop="item.prop">
          <template #default="scope" v-if="item.prop == 'type_label'">
            {{ scope.row.type_label.cn_name }}
          </template>
          <template #default="scope" v-if="item.prop == 'status_label'">
            <p
              :style="{ color: scope.row.status_label.cn_name === '已处理' ? 'var(--el-color-success)' : 'var(--el-color-danger)' }">
              {{
                scope.row.status_label.cn_name }}</p>
          </template>
          <template #default="scope" v-if="item.prop == 'handle'">
            <el-button type="primary" size="small" @click.stop="toDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page flexCenter">
      <el-pagination background layout="prev, pager, next" @current-change="pageChange" @prev-click="pageChange"
        @next-click="pageChange" :total="state.count" :page-size="state.searchLimit.limit" />
    </div>
  </div>
</template>

<script setup name="AfterSalesWorkOrder">
import AfterSalesForm from './components/AfterSalesForm.vue';
import { ref, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { getAfterSaleList } from '@/api/operateManage/AfterSalesWorkOrder'

const router = useRouter();
const theader = ref([
  { prop: 'work_no', label: '工单编号' },
  { prop: 'client_name', label: '商家名称', width: "120px" },
  { prop: 'type_label', label: '问题类型', width: "85px" },
  { prop: 'sticker_num', label: '设备编号', width: "90px" },
  { prop: 'order_no', label: '订单编号', width: "110px" },
  { prop: 'bank_account', label: '客户银行账户' },
  { prop: 'request_refund_amount', label: '申请退款金额', width: '100px' },
  { prop: 'contact_email', label: '联系邮箱' },
  { prop: 'description', label: '问题描述' },
  { prop: 'create_time', label: '提交时间' },
  { prop: 'status_label', label: '状态', width: "75px" },
  { prop: 'handle', label: '操作', width: "80px" }
])
const loadingData = ref(false);
const btnLoading = ref(false);
const tableData = ref([])
const state = reactive({
  form: {

  },
  searchLimit: {
    page: 1,
    limit: 20
  },
  count: 0
})
// methods

const search = async (form) => {
  btnLoading.value = true;
  state.form = form
  getList()
}

const getList = async () => {
  loadingData.value = true;
  const res = await getAfterSaleList({ ...state.searchLimit, ...state.form })
  if (res.code === 1000) {
    tableData.value = res.data.listData.list
    state.count = res.data.listData.count
  }
  btnLoading.value = false;
  loadingData.value = false;
}

const toDetails = (item) => {
  router.push({ name: 'WorkOrderDetail', query: { id: item.id } })
}

const pageChange = (page) => {
  state.searchLimit.page = page
  getList()
}


// life cycle
onBeforeMount(() => {
  getList()
})

</script>

<style lang="less" scoped>
.showtable {
  margin: 0 20px;
}

.page {
  margin: 20px;
}
</style>